import React from "react";
import clsx from "clsx";
import { useDispatch, useSelector } from "react-redux";
import { setSidebarToggleMobile } from "../../stores/themeSlicer";

import HeaderWidget from "./components/HeaderWidget";
import { ReduxStoreTypes } from "../../stores/rootStore";
import { Typography } from "@material-ui/core";

interface HeaderProps {
  headerShadow?: boolean;
  headerBgTransparent?: boolean;
  sidebarToggleMobile?: boolean;
  setSidebarToggleMobile?: boolean;
}

const Header = (props: HeaderProps) => {
  const themeConfig = useSelector(
    (state: ReduxStoreTypes) => state.themeOptions
  );
  const dispatch = useDispatch();
  const {
    headerShadow,
    headerBgTransparent,
    sidebarToggleMobile,
  } = themeConfig;

  //Logo Here

  return (
    <>
      <Typography
        variant="body1"
        component="span"
        className={clsx("app-header", {
          "app-header--shadow": headerShadow,
          "app-header--opacity-bg": headerBgTransparent,
        })}
      >
        <button
          className={clsx(
            "navbar-toggler hamburger hamburger--elastic toggle-mobile-sidebar-btn",
            { "is-active": sidebarToggleMobile }
          )}
          onClick={() => dispatch(setSidebarToggleMobile(!sidebarToggleMobile))}
        >
          <span className="hamburger-box">
            <span className="hamburger-inner" />
          </span>
        </button>
        <div className="widgets-container">
          <HeaderWidget
            cryptoName="XPR"
            cryptoChanges={"-2"}
            cryptoPrice={18952}
            isAscending={false}
          />
          <HeaderWidget
            cryptoName="LTC"
            cryptoChanges={"+3"}
            cryptoPrice={18952}
            isAscending={false}
          />
          <HeaderWidget
            cryptoName="ETH"
            cryptoChanges={"+1"}
            cryptoPrice={18952}
            isAscending={true}
          />
          <HeaderWidget
            cryptoName="BTC"
            cryptoChanges={"+2"}
            cryptoPrice={18952}
            isAscending={false}
          />
          <HeaderWidget
            cryptoName="XPR"
            cryptoChanges={"-2"}
            cryptoPrice={18952}
            isAscending={false}
          />
        </div>
      </Typography>
    </>
  );
};

export default Header;
